import React, { useEffect } from "react";
import styles from "./index.module.less";
import { connect } from "react-redux";
import { getGMoneyAction } from "@redux/actions";

const Wallet = (props) => {
    const { getGMoneyAction, gMoney } = props;

    useEffect(() => {
        getGMoneyAction();
    }, [getGMoneyAction]);

    return (
        <div className={styles.wallet}>
            <div className={styles.inner}>
                <p className={styles.p1}>账户余额</p>
                <div className={styles.content}>
                    <p className={styles.count}>{gMoney}</p>
                    <span>G币</span>
                    <div className={styles.money_icon}></div>
                </div>
            </div>
            <div
                className={styles.to_pay}
                onClick={() => {
                    window.open("/pay", "_blank");
                }}
            >
                去充值
            </div>
        </div>
    );
};

export default connect((state) => ({ gMoney: state.getGMoneyReducer }), {
    getGMoneyAction,
})(Wallet);
